<template>
  <div class="index-img">
    <el-dialog
      :title="dataForm.id? '修改': '新增'"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="visible"
      top="10vh"
      width="1000px"
      @close="closeDialog"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        label-position="left"
        label-width="130px"
        style="min-width: 900px; width: 900px; margin-left:35px;"
      >
        <!-- 商品名称 -->
        <el-form-item  prop="id" hidden>
          <el-input v-model="dataForm.id" />
        </el-form-item>
        <!-- 品类编码 -->
        <el-form-item label="品类编码" prop="varietyCode">
          <el-input v-model="dataForm.varietyCode" />
        </el-form-item>
        <!-- 品类编码 -->
        <el-form-item label="品类名称" prop="varietyName">
          <el-input v-model="dataForm.varietyName" />
        </el-form-item>
        <el-form-item label=状态 prop="status">
          <el-select v-model="dataForm.status" placeholder="请选择" filterable >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">
         取消
        </el-button>
        <el-button type="primary" @click="dataFormSubmit()">
         确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  components: {

  },
  data() {
    return {
      visible: false,
      statusOptions: [{
        value: 0,
        label: '未发布'
      }, {
        value: 1,
        label: '已发布'
      }],
      dataForm: {
        dawNameId: null,
        id: null,
        varietyCode: '',
        varietyName: '',
        status: 0
      },
      relatedSpu: 0,
      // 关联数据
      prodSelectVisible: false,
      prods: {},
      rules: {
        varietyCode: [{ required: true, message: '请输入品类编码', trigger: 'change' }],
        varietyName: [{ required: true, message: '请输入品类名称', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }]
      }
    }
  },
  methods: {
    init(prodId,id) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.dataForm.id = id
        this.dataForm.prodId = prodId
        if (!this.dataForm.id) {
          return
        }
        this.$http({
          url: this.$http.adornUrl(`/admin/productTansferEnpand/getById`),
          params:  {id},
          method: 'get'
        }).then(({ data }) => {
            this.dataForm.varietyCode = data.varietyCode,
            this.dataForm.varietyName = data.varietyName,
            this.dataForm.status = data.status
        })
      })
    },

    closeDialog() {
      this.dataForm = {
        id: null,
        varietyCode: '',
        varietyName: '',
        status: 0
      }
    },

    /**
     * 表单提交
     */
    dataFormSubmit() {
      this.$refs.dataForm.validate(valid => {
        if (!valid) {
          return
        }
        const data = JSON.parse(JSON.stringify(this.dataForm))
        if(data.id){
          this.$http({
            url: this.$http.adornUrl(`/admin/productTansferEnpand`),
            data: data,
            method: 'put'
          }).then(data => {
            this.$message({
              message: this.$i18n.t('remindPop.remind'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
                this.$refs['dataForm'].resetFields()
              }
            })
          })
        }else{
          this.$http({
            url: this.$http.adornUrl(`/admin/productTansferEnpand`),
            data: data,
            method: 'post'
          }).then(data => {
            this.$message({
              message: this.$i18n.t('remindPop.remind'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
                this.$refs['dataForm'].resetFields()
              }
            })
          })
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.index-img {
  .el-form--label-left {
    .el-form-item__label {
      text-align: right !important;
    }
  }

  .select-pro {
    margin-top: 10px;
  }

  .card-prod-bottom {
    position: relative;
    text-align: left;
    top: -15px;

    .card-prod-name {
      margin: auto;
      padding: 0 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 118px;
      display: inline-block;
    }

    .card-prod-name-button {
      position: absolute;
      top: 30px;
      right: 0;
    }

    .el-button--medium {
      padding: 2px 6px !important;
    }
  }
}
</style>
